<template>
  <view class="popup-overlay" v-if="show">
    <view class="popup">
      <view class="popup-header">
        <text class="title">添加房间</text>
        <text class="close-btn" @click.stop="closePopup">×</text>
      </view>
      <view class="popup-content">
        <input class="popup-input" type="text" v-model="room.name" placeholder="输入房间名称" />
        <input class="popup-input" type="text" v-model="room.number" placeholder="输入房间编号" />
        
        <picker mode="selector" :range="durationOptions" @change="onDurationChange">
          <view class="picker-custom">
            <view class="picker-selected">{{ room.duration || '选择起订时长' }}</view>
            <view class="picker-arrow"></view>
          </view>
        </picker>

        <input class="popup-input" type="text" v-model="room.price" placeholder="输入时段收费价格" />
        <input class="popup-input" type="text" v-model="room.doorDeviceID" placeholder="设备id" />
        <input class="popup-input" type="text" v-model="room.aiDeviceID" placeholder="空调mac" />
        <input class="popup-input" type="text" v-model="room.tennisLeftID" placeholder="空调key" />
        <input class="popup-input" type="text" v-model="room.tennisRightID" placeholder="房间右边网球机ID" />
      </view>
      <button class="confirm-button" @click="confirmAddRoom">确认添加</button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: Boolean,  // 控制弹窗显示
  },
  data() {
    return {
      room: {
        name: '',
        number: '',
        duration: '',
        price: '',
        doorDeviceID: '',
        aiDeviceID: '',
        tennisLeftID: '',
        tennisRightID: ''
      },
      durationOptions: ['30分钟', '1小时', '2小时'] // 示例起订时长选项
    };
  },
  methods: {
    openPopup() {
      this.show = true;  // 打开弹窗
    },
    closePopup() {
      this.show = false;  // 关闭弹窗
    },
    onDurationChange(e) {
      this.room.duration = this.durationOptions[e.detail.value];  // 选择起订时长
    },
    confirmAddRoom() {
      // 校验必填字段是否填写
      if (!this.room.name || !this.room.number || !this.room.duration || !this.room.price) {
        uni.showToast({
          title: '请完整填写信息',
          icon: 'none'
        });
        return;
      }

      // 调用 API 提交房间数据
      this.addRoomData();

      // 关闭弹窗
      this.closePopup();

      // 通知父组件刷新数据
      this.$emit('refreshData');  // 触发父组件的刷新事件
    },
    addRoomData() {
      // 获取 store_id 并提交房间数据
      this.$xyfun.userStoreId().then((store_id) => {
		  // console.log("store_id:===--=" + store_id)
        this.$api.post({
          url: '/Room/addRoom',
          loadingTip: '添加房间...',
          data: {
            store_id: store_id,
            name: this.room.name,
            number: this.room.number,
            duration: this.room.duration,
            price: this.room.price,
            doorDeviceID: this.room.doorDeviceID,
            aiDeviceID: this.room.aiDeviceID,
            tennisLeftID: this.room.tennisLeftID,
            tennisRightID: this.room.tennisRightID
          },
          success: (res) => {
            uni.stopPullDownRefresh();
            this.isLoading = false;
            if (res.code === 1) {
              uni.showToast({
                title: '房间添加成功',
                icon: 'success'
              });
            } else {
              uni.showToast({
                title: res.msg || '添加失败',
                icon: 'none'
              });
            }
          },
          fail: () => {
            uni.showToast({
              title: '请求失败，请重试',
              icon: 'none'
            });
          }
        });
      });
    }
  }
};
</script>


<style scoped>
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  background-color: #fff;
  width: 80%;
  border-radius: 10px;
  padding: 20px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.close-btn {
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.popup-content {
  display: flex;
  flex-direction: column;
}

.popup-input {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #F5F5F5;
}

.picker-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #F5F5F5;
  margin-bottom: 15px;
}

.picker-selected {
  flex: 1;
  color: #333;
}

.picker-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  margin-left: 10px;
}

.confirm-button {
  width: 100%;
  background-color: #65C61D;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.confirm-button:hover {
  background-color: #45a049;
}
</style>
